---
type: tutorial
title: 웹에 사이트 배포
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 튜토리얼 프로젝트의 GitHub 저장소를 Netlify에 연결하고 웹에 배포
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - GitHub 저장소를 새로운 Netlify 앱으로 추가
  - Astro 사이트를 웹에 배포
</PreCheck>

여기에서는 GitHub 저장소를 Netlify에 연결합니다. Netlify는 코드 변경 사항을 커밋할 때마다 해당 프로젝트를 사용하여 웹에서 사이트를 실시간으로 빌드하고 배포합니다.

:::tip[우리가 사용할 도구]
이 튜토리얼에서는 **Netlify**를 사용하지만 사이트를 인터넷에 배포하기 위해 선호하는 호스팅 서비스를 사용해도 됩니다.
:::

## 새로운 Netlify 사이트 만들기

<Steps>
1. 아직 계정이 없다면 [Netlify](https://netlify.com)에서 무료 계정을 만드세요.

    사용자 이름을 기록해 두세요. `https://app.netlify.com/teams/username`에서 대시보드와 생성한 모든 사이트를 볼 수 있습니다.

2. <kbd>Add new site</kbd> > <kbd>Import an existing project</kbd>를 클릭하세요.

    Git 공급자에 연결하라는 메시지가 표시됩니다. GitHub를 선택하고 화면에 표시된 단계에 따라 GitHub 계정을 인증하세요. 그런 다음 제공된 목록에서 Astro 프로젝트의 GitHub 저장소를 선택하세요.

3. 마지막 단계에서 Netlify는 앱의 사이트 설정을 표시합니다. Astro 프로젝트에 대한 기본값이 정확해야 하므로 아래로 스크롤하여 <kbd>Deploy site</kbd>를 클릭할 수 있습니다.
</Steps>

축하합니다. Astro 웹사이트가 생겼습니다!

## 프로젝트 이름 변경

Netlify의 사이트 개요 페이지에는 무작위로 생성된 프로젝트 이름과 `https://project-name-123456.netlify.app` 형식의 웹사이트 URL이 표시됩니다. 프로젝트 이름을 좀 더 기억하기 쉬운 이름으로 변경하면 URL이 자동으로 업데이트됩니다.

## 새 웹사이트 방문

사이트 설정에서 URL을 클릭하거나 브라우저 창에 해당 URL을 입력하여 새 웹사이트를 확인하세요.

<Box icon="question-mark">

### 지식을 테스트해보세요

기존 웹사이트의 홈 페이지를 업데이트하려고 합니다. 어떤 조치를 취하나요?

  <MultipleChoice>
    <Option>
      터미널을 열고 'create astro'를 실행한 다음 Netlify URL을 방문합니다.
    </Option>
    <Option>
      Netlify 앱에서 설정을 변경한 다음 StackBlitz에서 새 Astro 프로젝트를 포크합니다.
    </Option>
    <Option isCorrect>
      `index.astro`를 편집합니다. 변경 사항을 GitHub에 커밋하고 푸시합니다. 나머지는 Netlify가 처리합니다!
    </Option>
  </MultipleChoice>
 </Box>

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] 업데이트된 웹사이트를 온라인으로 볼 수 있습니다.
- [ ] 이제 코딩으로 돌아갈 준비가 되었습니다!
</Checklist>
</Box>

### 추가 자료

- <p>[Netlify 배포에 대한 단계별 안내서](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) <Badge>외부 링크</Badge></p>
